<template>
  <div class="height_width-full">
    <div class="breadcrumb">
      <div class="breadcrumb-icon-box">
        <i class="el-icon-location-outline"></i>
      </div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path : '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item> 设备用途</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-divider></el-divider>
    <div>
      <el-row>
        <el-button type="success" size="small" @click="handleEdit()">添加</el-button>
      </el-row>
      <el-row>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="序号"
            prop="id" width="50px">
          </el-table-column>
          <el-table-column
            label="设备用途名称"
            prop="title">
          </el-table-column>
          <el-table-column
            label="设备用途编码"
            prop="code">
          </el-table-column>
          git
          <el-table-column
            label="备注"
            prop="remark" width="200px">
            <template slot-scope="scope">
              <p class="remark-text">{{ scope.row.remark }}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="创建日期"
            prop="createTime">
            <template slot-scope="scope">
              {{ new Date(scope.row.createTime).format("yyyy-MM-dd hh:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status == 1"
                active-text="启用"
                inactive-text="禁用"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="statusChange($event , scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300px">
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                @click="showDetail(scope.row)">查看
              </el-button>
              <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)">编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div class="page-box">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            layout=" prev, pager, next, jumper , sizes, total"
            :total="page.totalCount">
          </el-pagination>
        </div>
      </el-row>
    </div>
    <el-dialog title="设备用途类别" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="categoryForm">
        <el-form-item label="设备用途名称" :label-width="formLabelWidth" prop="title">
          <el-input v-model="form.title" autocomplete="off" placeholder="请输入设备用途名称"></el-input>
        </el-form-item>
        <el-form-item label="设备用途编码" :label-width="formLabelWidth" prop="code">
          <el-input v-model="form.code" autocomplete="off" placeholder="请输入设备用途编码"></el-input>
        </el-form-item>
        <el-form-item label="设备用途备注" :label-width="formLabelWidth" prop="remark">
          <el-input type="textarea" placeholder="请输入设备用途备注" autosize v-model="form.remark"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
          <el-switch
            v-model="form.status == 1"
            active-text="启用"
            inactive-text="禁用"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="formStatusChange">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="disabled" @click="saveCategory('categoryForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="设备用途简介详情" :visible.sync="dialogDetailVisible">
      <div class="detail-text">
        <h2>{{ categoryDetail.title }}</h2>
        <p>{{ categoryDetail.remark }}</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDetailVisible = false">确&nbsp;&nbsp;定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AssetType",
  data() {
    return {
      disabled: false,
      tableData: [],
      dialogDetailVisible: false,
      dialogFormVisible: false,
      categoryDetail: {},
      page: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        pageSizes: [10, 50, 70, 100],
      },
      formLabelWidth: '120px',
      form: {
        id: null,
        title: '',
        code: '',
        status: 1,
        remark: '',
        assetUserId: this.Storage.Local.get("user").id
      },
      rules: {
        title: [
          {
            required: true, message: "请输入设备用途名称", trigger: "blur"
          }, {
            max: 10, min: 2, message: "长度为2-10个字符", trigger: "blur"
          }
        ],
        code: [
          {
            required: true, message: "请输入设备用途编码", trigger: "blur"
          }, {
            pattern: /^[1-9a-zA-Z][\da-zA-Z]{5,7}$/, message: "长度为6-8之间且不能以0开头", trigger: "blur"
          }
        ],
        status: [
          {
            required: true, message: "请选择设备用途状态", trigger: "blur"
          }
        ],
        remark: [
          {
            max: 100, message: "最多输入100个字符", trigger: "blur"
          }
        ]
      }
    }
  },
  created() {
    this.getTableData(this.page.currentPage, this.page.pageSize);
  },
  methods: {
    toDisabled() {
      this.disabled = true;
      setTimeout(() => {
        this.disabled = false;
      }, 500)
    },
    showDetail(data) {
      this.dialogDetailVisible = true;
      this.categoryDetail = JSON.parse(JSON.stringify(data));
    },
    saveCategory(formName) {
      this.toDisabled();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.assetUserId = this.Storage.Local.get("user").id;
          this.$put(this.$api.API_DEVICE_USE_SAVE, this.form).then(res => {
            console.log(res);
            if (res.data.code == 200) {
              this.$notify.success("保存成功");
              this.getTableData(this.page.currentPage, this.page.pageSize);
              this.dialogFormVisible = false;
            }
          })
        } else {
          this.$message.info("请填写表单必填项");
          return false;
        }
      });
    },
    handleEdit(row) {
      console.log(row);
      console.log(this.Storage.Local.get("user").id)
      this.form = {
        id: null,
        title: '',
        code: '',
        status: 1,
        remark: '',
        assetUserId: this.Storage.Local.get("user").id
      };
      if (row) {
        this.form = JSON.parse(JSON.stringify(row))
      }
      this.dialogFormVisible = true;
    },
    formStatusChange(status) {
      console.log(status);
      this.form.status = status ? 1 : 2;
    },
    getTableData(currentPage, pageSize) {
      this.$get(this.$api.API_DEVICE_USE_LIST, {
        pageNum: currentPage,
        pageSize: pageSize
      }).then(res => {
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.page.currentPage = res.data.data.pageNum;
          this.page.totalCount = res.data.data.total;
        }
      })
    },
    statusChange($event, item) {
      if (!$event) {
        this.$confirm('您确定禁用该类型吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$put(this.$api.API_DEVICE_USE_SAVE, {
            id: item.id,
            status: 2
          }).then(res => {
            if (res.data.code == 200) {
              this.$notify.success("禁用成功");
              item.status = 2;
            } else {
              this.$notify.error("禁用失败");
            }
          })
        }).catch(() => {
          item.status = 1;
        });
      } else {
        this.$put(this.$api.API_DEVICE_USE_SAVE, {
          id: item.id,
          status: 1
        }).then(res => {
          if (res.data.code == 200) {
            this.$notify.success("启用成功");
            item.status = 1;
          } else {
            this.$notify.error("启用失败");
          }
        })
      }
    },
    handleSizeChange(data) {
      this.page.pageSize = data;
      this.getTableData(this.page.currentPage, data);
    }
    ,
    handleCurrentChange(data) {
      this.getTableData(data, this.page.pageSize);
    }
    ,
  }
}
</script>

<style scoped>

.remark-text {
  margin: 0;
  padding: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.page-box {
  margin-top: 10px;
}

.detail-text {
  padding: 0 10px;
}
</style>

